import {Outlet, useNavigate} from "react-router-dom"
import './index.css'
import {Avatar, Breadcrumb, Dropdown, Layout, Menu, message} from 'antd'
import {useCallback, useEffect, useState} from "react"
import {getIcon} from "../../utils/dynamic-icon"
import {MenuOutlined, SmileOutlined} from "@ant-design/icons"
import {logout} from "../../request/auth"
import {getCurMenu} from "../../request/menu"

const {Header, Sider, Content} = Layout
function Backstage({onUpdateMenu}) {
    const navigate = useNavigate()
    useEffect(() => {
        if (window.location.pathname === '/backstage') {
            navigate('/backstage/home')
        }
    }, [navigate])

    let [menu, setMenu] = useState([])
    let [breadcrumbItems, setBreadcrumbItems] = useState([])

    function updateBreadcrumbItems(keyPath) {
        breadcrumbItems = []
        let curMenu = menu
        for (let key of keyPath) {
            const item = curMenu.find(item => item.key === key)
            if (!item) return
            breadcrumbItems.push({title: <span>{item.icon}{item.label}</span>})
            curMenu = item.children
        }
    }

    let currentKeyPath = []
    if (breadcrumbItems.length === 0) {
        const pathname = window.location.pathname
        const indexes = []
        let index = '/backstage/'.length - 1
        while (true) {
            index = pathname.indexOf('/', index + 1)
            if (index === -1) break
            indexes.push(index)
        }
        indexes.push(pathname.length)
        currentKeyPath = indexes.map(index => pathname.substring(0, index))
        updateBreadcrumbItems(currentKeyPath)
    }

    function handleSelect({key, keyPath}) {
        keyPath = keyPath.reverse()
        navigate(key)
        updateBreadcrumbItems(keyPath)
        setBreadcrumbItems(breadcrumbItems)
    }

    const loadMenu = useCallback(() => {
        function loadMenuInner(data, parentKey) {
            if (!data) return undefined
            return data.map(item => {
                const key = `${parentKey}/${item.name}`
                return {
                    key,
                    icon: getIcon(item.icon),
                    label: item.label,
                    children: loadMenuInner(item.children, key)
                }
            })
        }

        getCurMenu().then(menu => {
            onUpdateMenu(menu)
            setMenu(loadMenuInner([{
                label: "首页",
                name: "home",
                icon: "HomeOutlined",
                show: true
            }, ...menu], '/backstage'))
        }).catch(({msg}) => message.error(msg))
    }, [onUpdateMenu])

    useEffect(loadMenu, [loadMenu])

    return (
        <Layout className="backstage-container">
            <Sider>
                <Menu
                    items={menu}
                    mode="inline"
                    theme="dark"
                    onSelect={handleSelect}
                    defaultOpenKeys={currentKeyPath}
                    defaultSelectedKeys={[window.location.pathname]}>
                </Menu>
            </Sider>
            <Layout>
                <Header className="backstage-header">
                    <MenuOutlined/>
                    <Breadcrumb items={breadcrumbItems} className="my-breadcrumb"></Breadcrumb>
                    <div className="blank"></div>
                    <Dropdown
                        menu={{
                            items: [
                                {
                                    key: 'logout',
                                    label: <span onClick={logout}>退出登录</span>
                                }
                            ]
                        }}
                        placement="bottomRight"
                        arrow>
                        <Avatar shape="square" size={50} icon={<SmileOutlined/>}/>
                    </Dropdown>
                </Header>
                <Content className="backstage-content">
                    <Outlet context={[loadMenu]}/>
                </Content>
            </Layout>
        </Layout>
    )
}

export default Backstage